<template>
  <div class="foot">
    <div class="foot-register" v-if="isShow">
      <img 
        src="../../assets/images/index/close.png" alt="" 
        width="16" height="16" class="closeimg"
        @click="close"
      >
        <div class="pageCon con">
          <img src="../../assets/images/index/foot-register.png" alt="" width="142" height="98" class="img">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            :show-message="false"
            class="demo-ruleForm flex-center-start"
          >
              <div class="my-input">
                <div class="label" v-show="ruleForm.userName !== ''">姓名</div>
                <el-form-item prop="userName">
                  <el-input v-model.trim="ruleForm.userName" placeholder="请输入您的姓名" maxlength="50" :class="ruleForm.userName == '' ? '' : 'label-line'"></el-input>
                </el-form-item>
              </div>
              <div class="my-input">
                <div class="label" v-show="ruleForm.companyName !== ''">企业名称</div>
                <el-form-item prop="companyName">
                  <el-input v-model.trim="ruleForm.companyName" placeholder="请输入您的企业名称" maxlength="50" :class="ruleForm.companyName == '' ? '' : 'label-line'"></el-input>
                </el-form-item>
              </div>
              <div class="my-input">
                <div class="label" v-show="ruleForm.jobTitle !== ''">职位</div>
                <el-form-item prop="jobTitle">
                  <el-input v-model.trim="ruleForm.jobTitle" placeholder="请输入您的职位" maxlength="50" :class="ruleForm.jobTitle == '' ? '' : 'label-line'"></el-input>
                </el-form-item>
              </div>
              <div class="my-input">
                <div class="label" v-show="ruleForm.phone !== ''">手机号码</div>
                <el-form-item prop="phone">
                  <el-input v-model.trim="ruleForm.phone" placeholder="请输入您的手机号码" :class="ruleForm.phone == '' ? '' : 'label-line'"></el-input>
                </el-form-item>
              </div>
              <div class="my-input">
                <el-form-item>
                  <div class="registerBtn mainBtn mouse-cursor text-center" @click="submitForm('ruleForm')">免费试用</div>
                </el-form-item>
              </div>
          </el-form>
        </div>
      </div>
    </div>
</template>
<script>
import { validPhone } from '@/utils/validate'
import { trialApplySubmit } from '@/api/register.js'
import { ElMessage } from 'element-plus'
export default {
  name: '',
  data () {
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      }
      else if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      isShow: true,
      ruleForm: {
        userName: '',
        companyName: '',
        jobTitle: '',
        phone: '',
      },
      rules: {
        userName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          }
        ],
        companyName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur',
          }
        ],
        jobTitle: [{
            required: true,
            message: '请输入职位',
            trigger: 'blur',
          }],
        phone:[{
            required: true,
            validator: validatePhone,
            trigger: 'blur',
          }],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid, errObj) => {
        if (valid) {
          trialApplySubmit(this.ruleForm).then(res => {
            if (res.data.bizCode == 'SUCCESS' && res.data.respCode == '00000') {
              this.dialogVisible = false
              this.$emit('registerSuccess')
            }else {
              ElMessage.error(res.data.bizMsg)
            }
          })
        } else {
          if (errObj.userName[0].field ) {
            ElMessage.error(errObj.userName[0].message)
            return false
          }
          if (errObj.companyName[0].field ) {
           ElMessage.error( errObj.companyName[0].message)
           return false
          }
          if (errObj.jobTitle[0].field ) {
            ElMessage.error(errObj.jobTitle[0].message)
            return false
          }
          if (errObj.phone[0].field ) {
            ElMessage.error(errObj.phone[0].message)
            return false
          }
          
        }
      })
    },
    close () {
      this.isShow = false
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/register';
.foot{
  width:100%;
  position: fixed;
  left:0;
  bottom:0;
  z-index:20;
}
.foot-register{
  width:100%;
  height:84px;
  background: #33abff;
  position: relative;
  .closeimg{
      position: absolute;
      top:30px;
      right:30px;
      z-index:21;
    }
  .con{
    height:100%;
    position: relative;
    .img{
      position: absolute;
      bottom:0;
      left:-142px;;
    }
    
    .demo-ruleForm{
      // flex-direction: column;
      height:100%; 
      .my-input{
        position: relative;
        margin-right:20px;
        .label{
          color:@mainColor;
          font-size: 14px;
          position: absolute;
          top:2px;
          left:15px;
          z-index:10;
        }
        ::v-deep .el-input__inner{
            height:46px;
            line-height: 46px;
          }
        .label-line{
          ::v-deep .el-input__inner{
            padding-top:16px;
          }
        }
        ::v-deep .el-form-item{
          margin-bottom:0;
        }
        
        
      }
      .mainBtn:hover{
        .primaryBtn()
      }
    }
  }
}
</style>


